<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>散点图： series type = scatter</title>
  <script src="./echarts.js"></script>
  <script src="./data/LifeData.js"></script>
  <style lang="css">
    #chart1, #chart2 {
      width: 1000px;
      height: 668px;
      /* border: 1px solid red; */
      float: left;
    }
  </style>
</head>
<body>
  <div id="chart1"></div>

  <script>
    function sizeFunction (x) {
      let y = Math.sqrt(x/5e8) + 0.1
      return y * 80
    }
    const myChart1 = echarts.init(document.getElementById('chart1'));

    let option = {
      baseOption: {
        backgroundColor: '#404a59',
        title: [
          {
            text: LifeData.timeline[0],
            left: '60%',
            top: '55%',
            textStyle: {
              fontSize: 100,
              color: 'rgba(255,255,255,0.7)'
            }
          },
          {
            text: '全国人均寿命与GDP关系演变',
            left: 'center',
            top: 10,
            textStyle: {
              color:'#aaa',
              fontWeight: 'normal'
            }
          }
        ],
        grid: {
          top: 100,
          left: 30,
          right: 100,
          containLabel: true,
        },
        xAxis: {
          name: '人均收入',
          nameLocation: 'center',
          nameTextStyle: {
            fontSize: 18
          },
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          splitLine: {
            show: false
          },
          /**
          * 对数
          * 3^2=9 a^x=N 这里2就是以3为底9的对数
          */
          type: 'log', // 对数轴
          min: 300,
          max: 100000,
          axisLabel: {
            formatter: '{value}$'
          }
        },
        yAxis: {
          max: 100,
          name: '平均寿命',
          nameTextStyle: {
            color: '#ccc',
            fontSize: 18,
          },
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            formatter: '{value}岁'
          },
        },
        timeline: {
          axisType: 'category',
          orient: 'vertical',
          right: 0,
          top: 20,
          bottom: 20,
          width: 55,
          inverse: true,
          lineStyle: {
            color: '#555',
          },
          controlStyle: {
            showNextBtn: false,
            showPrevBtn: false,
            itemStyle: {
              color: '#666',
              borderColor: '#666'
            },
          },
          data: [],
          label: {
            color: '#999',
            formatter: (value) => {
              return value.replace('年', '')
            }
          },
          symbol: 'none',
          checkpointStyle: {
            color: '#bbb',
            borderColor: '#777',
            borderWidth: 2,
          },
          emphasis: {
            label: {
              color: '#fff',
            },
            controlStyle: {
              color: '#aaa',
              borderColor: '#aaa'
            },
          },
          autoPlay: true,
          playInterval: 1000,
        },
        series: {
          type: 'scatter',
          itemStyle: {
            opacity: 0.8,
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: 'rgba(0,0,0,0.5)',
          },
          symbolSize: function (val) {
            return sizeFunction(val[2])
          },
          // data: [], 时间轴数据不能放这里，要放到下面的options
        },
        visualMap: {
          show: false,
          categories: LifeData.counties,
          dimension: 3,
          inRange: {
            color: (function () {
              // prettier-ignore
              var colors = ['#51689b', '#ce5c5c', '#fbc357', '#8fbf8f', '#659d84', '#fb8e6a', '#c77288', '#786090', '#91c4c5', '#6890ba'];
              return colors.concat(colors);
            })()
          }
        },
        tooltip: {
          padding: 5,
          backgroundColor: '#222',
          borderColor: '#777',
          borderWidth: 1,
          formatter: function (params) {
            let value = params.value
            return `
             国家: ${value[3]}<br>
             人均收入: ${value[0]}美元<br>
             人均寿命: ${value[1]}岁<br>
             总人口: ${value[2]}
            `
          }
        }
      },
      options: []
    }

    for (let i = 0; i < LifeData.timeline.length; i++) {
      option.baseOption.timeline.data.push(LifeData.timeline[i])
      option.options.push({
        title: { // 更新标题，只更新上面的第0个
          text: LifeData.timeline[i],
          // left: '60%',
          // top: '55%',
          // textStyle: {
          //   fontSize: 100,
          //   color: 'rgba(255,255,255,0.7)'
          // }
        },
        series: {
          data: LifeData.series[i]
        }
      })
    }

    myChart1.setOption(option)
  </script>
</body>
</html>